<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser"  width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules"  label-width="140px"
              label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="STATICOBJECT" label="对象：">
                  <el-select v-model="form.STATICOBJECT"  filterable placeholder="请选择对象">
                  <el-option
                    v-for="item in option.STATICOBJECTLIST"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="OBJECTNAME" label="对象渠道：">
                    <el-input v-model="form.OBJECTNAME" placeholder="请输入对象渠道" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="STATICMETRIC" label="统计量名：">
                    <el-input v-model="form.STATICMETRIC" placeholder="请输入统计量名" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="METRICNAME" label="统计量名备注：">
                    <el-input v-model="form.METRICNAME" placeholder="请输入统计量名备注" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="INTERVAL" label="间隔时间(秒)：">
                    <el-input v-model="form.INTERVAL" placeholder="请输入间隔时间" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="CHACEFLAG" label="缓存标志：">
                  <el-select v-model="form.CHACEFLAG"  filterable placeholder="请选择缓存标志">
                  <el-option
                    v-for="item in CHACEFLAGLIST"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
                  </el-form-item>
                </el-col>
                
                <el-col :span="12">
                  <el-form-item prop="REMARK" label="备注：">
                    <el-input v-model="form.REMARK" placeholder="请输入备注" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="FILTER" label="过滤器：">
                    <el-input v-model="form.FILTER" placeholder="请输入过滤器：" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button> 
            <el-button type="primary" size="mini"   @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Add from "@/message/paramManagement/realTimeMonitorParamSetting/add";
import Update from "@/message/paramManagement/realTimeMonitorParamSetting/update";
import request1 from "@/common/utils/requestTest";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
export default {
  name: "",
  data() {
    return {
        loading: false,
        CHACEFLAGLIST: [
        { name: "是", value: "1" },
        { name: "否", value: "0" },
      ],
        form:{
          STATICOBJECT:"",
          OBJECTNAME:"",
          STATICMETRIC:"",
          METRICNAME:"",
          INTERVAL:"",
          CHACEFLAG:"",
          REMARK:"",
          FILTER:""
        },
        rules: {
        STATICOBJECT: [
          {
            required: true,
            message: "请选择对象",
            trigger: "blur"
          }
        ],
        STATICMETRIC: [
          {
            required: true,
            message: "统计量名必填",
            trigger: "blur"
          }
        ],
        METRICNAME: [
          {
            required: true,
            message: "统计量名备注必填",
            trigger: "blur"
          }
        ],
        INTERVAL: [
          {
            required: true,
            message: "间隔时间必填",
            trigger: "blur"
          }
        ],
        CHACEFLAG: [
          {
            required: true,
            message: "请选择缓存标志",
            trigger: "blur"
          }
        ],
      }
      };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
    
  },
   watch: {
  },
  methods: {
      add() {
      //添加
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = this.option.log == "1" ? new Add() : new Update();
           if(this.option.log == "2"){
             resBody.data.ID =  this.option.currentRow.ID;
           }
            resBody.data.UPDATETIME = toolBox.timestampToTime(Date.parse(new Date())).replace(' ','').replace(/-/g,'').replace(/:/g,'');
            resBody.data.STATICOBJECT = this.form.STATICOBJECT;
            resBody.data.OBJECTNAME = this.form.OBJECTNAME;
            resBody.data.STATICMETRIC = this.form.STATICMETRIC;
            resBody.data.METRICNAME = this.form.METRICNAME;
            resBody.data.INTERVAL = this.form.INTERVAL;
            resBody.data.CHACEFLAG = this.form.CHACEFLAG;
            resBody.data.REMARK = this.form.REMARK;
            resBody.data.FILTER = this.form.FILTER;
            // console.log("新增因子参数发送的resBoay",resBoay,resBody.data);
            request1(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes=this.option.log=="1"?"新增":"修改";
                  this.$message({
                    type: "success",
                    message: `实时因子参数${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                   this.isShow = false;
                   this.$emit("refreshTable");
                }else{
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
              this.$refs.form.clearValidate(); //清楚表单验证
              this.$refs.form.resetFields();
        } else {
          this.$message({
            type: "warning",
            message: "新增 因子参数字请输入合法的数据！"
          });
          return false;
        }
      });
    },


    
    openCreate() {
      //打开弹窗事件
       this.$nextTick(function () {
        if (this.option.log == "2") {
          this.updateDate();
        }else{
        }
      })
    },
      updateDate() {
      this.form.STATICOBJECT = this.option.currentRow.STATICOBJECT;
      this.form.OBJECTNAME = this.option.currentRow.OBJECTNAME;
      this.form.STATICMETRIC = this.option.currentRow.STATICMETRIC;
      this.form.METRICNAME = this.option.currentRow.METRICNAME;
      this.form.INTERVAL = this.option.currentRow.INTERVAL;
      this.form.CHACEFLAG = this.option.currentRow.CHACEFLAG;
      this.form.REMARK = this.option.currentRow.REMARK;
      this.form.FILTER = this.option.currentRow.FILTER;
     
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
       // 重置表单数据
      this.$refs.form.clearValidate(); //清楚表单验证
      this.$refs.form.resetFields();
      this.$emit("refreshTable");
    },
    addType() { //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
    },
   },
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-card {
  overflow: inherit;
}
</style>
